
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="css/index/index.css" type="text/css">
</head>

<body>
<div class="first">
    <!-- <img src="imgs/index5.png" alt="" width="100%"> -->
    <!-- <div id="kongjian"><img src="imgs/s1.jpg" alt="" width="1365" height="640px"></div> -->
    <div id="index_first">
        <div class="container-fluid">
            <div class="row">
                <nav class="navbar navbar-inverse " role="navigation" id="index">
                    <div class="container-fluid">
                        <div class="collapse navbar-collapse"  style="float:left">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <img src="imgs/logo.png" alt="" width="50px" height="45px"
                                         style="margin-left:140px;">
                                    <div class="index1" style="margin-left:200px;color:white;">闲时</div>
                                </li>
                                <li class="dropdown index2" >
                                    <a href="index.jsp">首页</a>
                                </li>
                                <li class="dropdown">
                                    <a href="../freetime/services/serviceRelease.jsp">发布服务</a>
                                </li>
                                <li class="dropdown">
                                    <a href="../freetime/demand/demandRelease.jsp">发布需求</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#">了解交易模式</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#">关于我们</a>
                                </li>
                            </ul>
                        </div>
                        <div class="collapse navbar-collapse"  style="float:right">
                            <ul class="nav navbar-nav" style="margin-right:100px;">
                                <li class="dropdown">
                                    <a href="../freetime/client/login.jsp">登录</a>
                                </li>

                                <li class="dropdown">
                                    <a href="../freetime/client/register.jsp">注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div id="ind">
        <p style="padding-left: 15%;margin-top:50px;font-size: 40px;"><a href="#"
                                                                         style="color:white;">技能时间&nbsp;&nbsp;&nbsp;共享平台&nbsp;!</a></p>
    </div>

    <div id="ind2">
        <div>
            <div>
                <p style="padding-left: 15%;font-size: 40px;color:white;margin-top:40px;">30</p>
            </div>
            <div>
                <p style="padding-left: 19%;font-size: 12px;color:white;margin-top:-55px;">下单平均
                </p>
                <p style="padding-left: 19%;font-size: 15px;color:white;margin-top:-10px;">分钟完成</p>
            </div>
        </div>
        <div>
            <div>
                <p style="padding-left: 27%;font-size: 40px;color:white;margin-top:-60px;">60</p>
            </div>
            <div>
                <p style="padding-left: 31%;font-size: 12px;color:white;margin-top:-55px;">订单平均
                </p>
                <p style="padding-left: 31%;font-size: 15px;color:white;margin-top:-10px;">分钟完成</p>
            </div>
        </div>





    </div>



    <div class="first21">
        <p style="padding-left: 50px;padding-top:15px;font-size: 20px;"><a href="../freetime/services/serviceList.jsp" style="color:black;">预约服务</a>
        </p>
    </div>
    <div class="first22"><a href="../freetime/demand/demandList.jsp" style="padding-left: 50px;font-size: 20px;color: white;">报名需求</a></div>
    <%--width: 1000px;height:280px;margin-left:15%;background-color:white;margin-top:100px;--%>

    <div class="first3" >
        <%--"float: left;width:200px;height:200px;margin-left:30px;margin-top:30px;--%>
        <div class="first32" style="margin-left:100px;">
            <img src="imgs/index01.png" alt="" style="margin:50px 0 0 65px;">
            <hr style="height:1px;border:none; border-top:1px solid green; width:20px; ">
            <p style="text-align:center;font-size:18px;">服务有保障</p>
            <p style="text-align:center;display:none">无中站环节，直接配送</p>
        </div>
        <div class="first32" style="margin-left:100px;">
            <img src="imgs/index02.png" alt="" style="margin:50px 0 0 65px;">
            <hr style="height:1px;border:none; border-top:1px solid green; width:20px; ">
            <p style="text-align:center;font-size:18px;">快速上门服务</p>
            <p style="text-align:center;display:none">无中站环节，直接配送</p>
        </div>
        <div class="first32" style="margin-left:100px;" >
            <img src="imgs/index03.png" alt="" style="margin:50px 0 0 65px;">
            <hr style="height:1px;border:none; border-top:1px solid green; width:20px; ">
            <p style="text-align:center;font-size:18px;">质量有保证</p>
            <p style="text-align:center;display:none">无中站环节，直接配送</p>
        </div>
    </div>
</div>


<div id="first4" style="width: 1000px;height:100px;margin-left:15%;margin-top:140px;">
    <p style="font-size:30px;padding-top:20px;padding-left: 20px;">更多使用场景，更多选择</p>
    <p style="padding-left: 20px;">快速预约，满意你我</p>
</div>


<!-- 轮播 -->
<div class="container-fluid"style="z-index: -1;">
    <div class="row">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="imgs/index6.png" alt="First slide" style="height:400px;margin-left: 15%;">
                    <div class="four5" style="width:350px;height:400px;margin-left:600px;margin-top:-300px;">
                        <p style="font-size: 30px;">生活递送</p>
                        <p>快速服务，高效服务</p>
                        <div class="four51" style="margin-top:30px;">
                            <img src="imgs/index61.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">鲜花、礼物</p>
                            <img src="imgs/index62.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">钥匙、钱包</p>
                        </div>
                        <div class="four52" style="margin-top:30px;">
                            <img src="imgs/index63.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">证件、护照</p>
                            <img src="imgs/index64.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">手机、工牌</p>
                            <div id="f5" style="border:1px solid grey;width:250px;height:40px;margin-top:70px;"><a
                                    href="#" style="font-size: 25px;padding-left:50px;color: black;">查看配送价格</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="imgs/index7.png" alt="Second slide" style="height:400px;margin-left: 15%;">
                    <div class="four5" style="width:350px;height:400px;margin-left:600px;margin-top:-300px;">
                        <p style="font-size: 30px;">紧急递送</p>
                        <p>高效生活，省时省力</p>
                        <div class="four51" style="margin-top:30px;">
                            <img src="imgs/index71.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">手机、电脑</p>
                            <img src="imgs/index72.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">香水、口红</p>
                        </div>
                        <div class="four52" style="margin-top:30px;">
                            <img src="imgs/index73.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">衣服、鞋包</p>
                            <img src="imgs/index74.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">数码、其他</p>
                            <div id="f5" style="border:1px solid grey;width:250px;height:40px;margin-top:70px;"><a
                                    href="#" style="font-size: 25px;padding-left:50px;color: black;">查看配送价格</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="imgs/index8.png" alt="Third slide" style="height:400px;margin-left: 15%;">
                    <%--width:350px;height:400px;margin-left:600px;margin-top:-300px;--%>
                    <div class="four5" >
                        <p style="font-size: 30px;">美食递送</p>
                        <p>新鲜递送，完整度好
                        </p>
                        <div class="four51" style="margin-top:30px;">
                            <img src="imgs/index81.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">夜宵、生鲜</p>
                            <img src="imgs/index82.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">蛋糕、甜点</p>

                        </div>
                        <%--margin-top:30px;--%>
                        <div class="four52" >
                            <img src="imgs/index83.png" alt="" style="width: 50px;height:50px;">
                            <p style="margin-top:-35px;margin-left:70px;">水果、蔬菜</p>
                            <img src="imgs/index84.png" alt=""
                                 style="width: 50px;height:50px;margin-left:200px;margin-top: -60px;">
                            <p style="margin-top:-48px;margin-left:270px;">酒水、奶茶</p>
                            <%--border:1px solid grey;width:250px;height:40px;margin-top:70px;--%>
                            <div id="f5" ><a
                                    href="#" style="font-size: 25px;padding-left:50px;color: black;">查看配送价格</a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                                                                                         aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
</div>
<%--width: 100%;height:800px;margin-top:100px;--%>
<div id="first4">
    <div>
        <p style="font-size: 30px;text-align:center;">服务保障</p>
        <p style="text-align:center;">专业高效更速度，传递善良有温度</p>
    </div>
    <div id="first41"
         style="float: left;width:300px;height:300px;margin-left:15%;margin-top:30px; border:1px solid grey;">
        <p style="text-align:center;font-size:18px;padding:300px 0 0 20px;">已为1亿用户解决文件合同、接送小孩上学、照看老人等难题</p>

    </div>
    <div id="first42"
         style="float:left;margin-left:20px;margin-top:30px;width:300px;height:300px;border:1px solid grey;">
        <p style="text-align:center;font-size:18px;padding:300px 0 0 20px;">城市开通服务，随时下单，即可享为您生活带来的便捷与贴心</p>
    </div>
    <div id="first43"
         style="float: right;margin-right:210px;margin-top:30px;width:300px;height:300px;border:1px solid grey;">
        <p style="text-align:center;font-size:18px;padding:300px 0 0 20px;opacity: 1;">运力充足，保证接单速度，及时满足客户的需求</p>
    </div>
    <div id="first44"
         style="float: left;width:940px;height:300px;margin-left:15%;margin-top:80px; border:1px solid grey;">
        <div id="first45" style="float: left;width:600px;height: 300px;">
            <img src="imgs/index126.jpg" alt="" style="width:620px;height: 300px;"></div>
        <div id="first46" style="float:right;">
            <img src="imgs/index127.jpg" alt="" style="width:320px;height: 300px;">
            <p style="margin-top: -200px;padding-left: 20px;font-size: 30px;">有速度 更有温度</p>
            <p style="padding-left: 20px;">传递人与人之间的善意 就是闪送存在的意义</p>

        </div>
    </div>
</div>


<div class="first5" style="width: 100%; height: 450px;">
    <div>
        <p style="font-size: 30px;text-align:center;padding-top:40px;">服务保障</p>
        <p style="text-align:center;">专业高效更速度，传递善良有温度</p>
    </div>

    <div class="container-fluid" style="margin-left:15%;padding-top:20px;">
        <div class="row">
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="imgs/index91.png" alt="" style="width:50px;height:50px;margin:30px 0 0 50px;">
                    <hr style="height:2px;border:none; border-top:1px solid black; width:15px; ">
                    <p style="text-align:center;font-size:18px;">时间自由</p>
                    <p style="text-align:center;display:none">无中站环节，直接配送</p>
                </div>
            </div>
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="imgs/index92.png" alt="" style="width:50px;height:50px;margin:30px 0 0 50px;">
                    <hr style="height:2px;border:none; border-top:1px solid black; width:15px; ">
                    <p style="text-align:center;font-size:18px;">收入丰厚</p>
                    <p style="text-align:center;display:none">无中站环节，直接配送</p>
                </div>
            </div>
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="imgs/index93.png" alt="" style="width:50px;height:50px;margin:30px 0 0 50px;">
                    <hr style="height:2px;border:none; border-top:1px solid black; width:15px; ">
                    <p style="text-align:center;font-size:18px;">丰富社交</p>
                    <p style="text-align:center;display:none">无中站环节，直接配送</p>
                </div>
            </div>
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="imgs/index94.png" alt="" style="width:50px;height:50px;margin:30px 0 0 50px;">
                    <hr style="height:2px;border:none; border-top:1px solid black; width:15px; ">
                    <p style="text-align:center;font-size:18px;">流程简单</p>
                    <p style="text-align:center;display:none">无中站环节，直接配送</p>

                </div>
            </div>
            <div class="col-md-2">
                <div class="thumbnail">
                    <img src="imgs/index95.png" alt="" style="width:50px;height:50px;margin:30px 0 0 50px;">
                    <hr style="height:2px;border:none; border-top:1px solid black; width:15px; ">
                    <p style="text-align:center;font-size:18px;">奖励多多</p>
                    <p style="text-align:center;display:none">无中站环节，直接配送</p>

                </div>
            </div>
            <div id="f61" style="width:250px;height:40px;border:1px solid white;margin:220px 0 0 30%;">
                <a href="../freetime/services/registerServiceProvider.jsp" style="font-size: 25px;color:white;padding-left:35px;">我要成为服务者</a>
                <%--<a href="/freetime/collection/registerServiceProvider.jsp"--%>
            </div>
        </div>
    </div>


    <div class="switch-center p-center" style="margin-left:15%;height:200px;">
        <div class="partner-title" style="margin-top:100px;">
            <h1 style="padding-left:28%;">专业、可靠的合作伙伴</h1>
            <p style="padding-left:25%;">与众多知名企业合作，扩大了企业服务半径，提高了企业服务品质</p>
        </div>

        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index10.png" alt="">
            </div>
        </div>

        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index11.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index12.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index13.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index14.png" alt="">
            </div>
        </div>


    </div>



    <div id="f7" style="margin-left:15%;height:100px;">
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index21.png" alt="">
            </div>
        </div>

        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index22.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index23.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index24.png" alt="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="thumbnail">
                <img src="imgs/index25.png" alt="">
            </div>
        </div>
    </div>
</div>

<div id="f8" style="margin-top:370px;">
    <p style="text-align: center;font-size:30px;">......</p>
</div>



<div class="f9" style="width: 100%px; height: 400px;">


    <div class="container-fluid" style="margin-left:15%;">
        <div class="row">

            <div id="91">
                <p style="color: white;font-size:20px;text-align: center;padding-top:90px;">用户端</p>

                <div>
                    <div>
                        <div style="width:150px;height:40px;border:1px solid white;margin:10px 0 0 48%;float:left;">
                            <img src="imgs/index41.png" alt="" style="width:30px;height:35px;margin-left:20px;">
                            <p style="font-size: 18px;color:white;margin:-30px 0 0 60px;">AppStore</p>
                        </div>
                        <div
                                style="width:150px;height:40px;border:1px solid white;margin-left:63%;margin-top:-40px;float:left;">
                            <img src="imgs/index42.png" alt="" style="width:30px;height:35px;margin-left:20px;">
                            <p style="font-size: 18px;color:white;margin:-30px 0 0 60px;">Android</p>
                        </div>
                        <div
                                style="width:150px;height:40px;border:1px solid white;margin-left:78%;margin-top:-40px;float:left;">
                            <p style="font-size: 18px;color:white;padding-left:30px;padding-top: 5px;">微信小程序</p>
                        </div>
                        <!-- <div
                            style="width:150px;height:40px;border:1px solid white;margin-left:550px;margin-top:80px;float:left;">
                            <p style="font-size: 18px;color:white;padding-left:30px;padding-top: 5px;">微信小程序</p>
                        </div> -->
                        <div style="width:150px;height:40px;border:1px solid white;margin:70px 0 0 48%;float:left;">
                            <img src="imgs/index42.png" alt="" style="width:30px;height:35px;margin-left:20px;">
                            <p style="font-size: 18px;color:white;margin:-30px 0 0 60px;">Android</p>
                            <p style="font-size: 18px;color:white;margin:-70px 0 0 0px;">服务人员</p>
                        </div>
                        <div>
                            <img src="imgs/app3.png" alt="" style="width:700px;margin-top:-422px;margin-left:-100px;">
                        </div>
                    </div>

                </div>

            </div>



        </div>
    </div>



    <div class="foot" style=" background-color:rgb(51, 51, 51);margin-top:0px;height: 250px;">
        <div style="margin-left:42%; padding-top:30px;">
            <img src="imgs/51.png" alt="" style="width:50px;height:50px;">
            <img src="imgs/52.png" alt="" style="width:50px;height:50px;margin-left:30px;">
        </div>
        <ul style="list-style: none;margin-left:30%;">
            <li><a href="#">成为员工</a></li>
            <li><a href="#">成为合作商户</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
        <p style="padding-top:50px;padding-left:30%;">
            <a href="//cdn.ishansong.com/iss-new-pc/images/bigImg/license.jpg" rel="noreferrer noopener"
               class="license" target="_blank">营业执照&nbsp;&nbsp;</a>
            <a href="#">电话 400 612 6688 &nbsp;&nbsp;</a><a class="mr20" href="mailto:info@ishansong.com">企业邮箱
            info@ishansong.com&nbsp;&nbsp;</a>
            <a href="mailto:lzjb@ishansong.com" class="mr20">廉正举报邮箱 &nbsp;&nbsp;lzjb@ishansong.com</a>
        </p>



        <p style="padding-left:27%;"><span>2014 京ICP备14006546号-4.</span><a rel="noreferrer noopener" target="_blank"
                                                                           href="http://www.beian.gov.cn/portal/registerSystemInfo?COLLCC=889263189&amp;recordcode=11010802020241"><img
                src="">
            京公网安备 11010802020241号</a>
        </p>
    </div>
</div>




<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="plugins/bootstrap/js/bootstrap.js"></script>

<script>
    // 让banner - 每过2秒轮播
    $('#myCarousel').carousel({
        interval: 1000
    })
</script>
</body>

</html>